<div class="layui-hide" id='enian-nav-bar'>
	<!-- 默认选中菜单左侧 -->
	<a type='menu' data-url=""></a>
	<a data-url="">个性设置</a>
</div>

<style type="text/css">
	body{
		background: #f2f2f2;
	}

</style>


<div class="layui-card">
	<div class="layui-card-header">
		外观设置
	</div>
	<div class="layui-card-body">
		<form class="layui-form layui-form-pane" action="" lay-filter="system-ui">
			<div class="layui-form-item">
				<label class="layui-form-label">主题切换</label>
				<div class="layui-input-block">
					<select id="themeList" name="system-ui-theme" lay-filter="system-ui-theme">
						<option value="">默认</option>
						
					</select>
				</div>
			</div>
		</form>
	</div>
</div>


<form class="layui-form layui-form-pane layui-hide" action="">
	<div class="layui-form-item">
		<label class="layui-form-label">长输入框</label>
		<div class="layui-input-block">
			<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">短输入框</label>
		<div class="layui-input-inline">
			<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">日期选择</label>
			<div class="layui-input-block">
				<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">行内表单</label>
			<div class="layui-input-inline">
				<input type="text" name="number" autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">密码</label>
		<div class="layui-input-inline">
			<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">范围</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">单行选择框</label>
		<div class="layui-input-block">
			<select name="interest" lay-filter="aihao">
				<option value=""></option>
				<option value="0">写作</option>
				<option value="1" selected="">阅读</option>
				<option value="2">游戏</option>
				<option value="3">音乐</option>
				<option value="4">旅行</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">行内选择框</label>
		<div class="layui-input-inline">
			<select name="quiz1">
				<option value="">请选择省</option>
				<option value="浙江" selected="">浙江省</option>
				<option value="你的工号">江西省</option>
				<option value="你最喜欢的老师">福建省</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="quiz2">
				<option value="">请选择市</option>
				<option value="杭州">杭州</option>
				<option value="宁波" disabled="">宁波</option>
				<option value="温州">温州</option>
				<option value="温州">台州</option>
				<option value="温州">绍兴</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="quiz3">
				<option value="">请选择县/区</option>
				<option value="西湖区">西湖区</option>
				<option value="余杭区">余杭区</option>
				<option value="拱墅区">临安市</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item" pane="">
		<label class="layui-form-label">开关-开</label>
		<div class="layui-input-block">
			<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
		</div>
	</div>
	<div class="layui-form-item" pane="">
		<label class="layui-form-label">单选框</label>
		<div class="layui-input-block">
			<input type="radio" name="sex" value="男" title="男" checked="">
			<input type="radio" name="sex" value="女" title="女">
			<input type="radio" name="sex" value="禁" title="禁用" disabled="">
		</div>
	</div>
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">文本域</label>
		<div class="layui-input-block">
			<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	</div>
	<div class="layui-form-item">
		<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
	</div>
</form>

<script type="text/javascript">
	layui.config({base: '/static/layui_extends/', })
	layui.use(['treetable','layer','form','laytpl','jquery'],function(){
		var form =layui.form,$=layui.jquery;
		themeRender();
		form.on('select(system-ui-theme)', function(data){
		  layui.data('user_config',{'key':"theme",'value':data.value} );
		  if(data.value){
		  	$.ajax({
				type:"get",
				url:enianAdmin.config('path').theme + "/" + data.value + '.css',
				success:function(css){
					if(css){
						$('#THEME').html(css);
					}
					
				},
				async:true
			});
		  }else{
		  	//默认主题
		  	$('#THEME').html('');
		  }
		 
		  layer.msg('主题修改成功，若无效果请点击浏览器刷新按钮')
//		  //加载主题文件，如果名称为空，将不使用主题文件，
//				var user_config = layui.data('user_config' );
//				console.log(user_config)
//				if(user_config.theme){
//					layui.link(enianAdmin.config.path.theme+user_config.theme+'.css');
//				}
		});      
		//系统-ui
		//获得主题
		var user_config = layui.data('user_config' );
		//console.log(user_config.theme)
		form.val("system-ui", {
		  "system-ui-theme": user_config.theme,
		})
		
		function themeRender(){
			
			var html = '';
			var list = enianAdmin.config('themeList');
			//layer.msg(JSON.stringify(list))
			for(var k in list){
				html += '<option value="'+k+'">'+list[k]+'</option>';
			}
			$('#themeList').append(html)
		}
	})
</script>